@import "@/components/UI/style/mixins/util";

.api-editor {
	.api-editor-title {
		display: flex;
		width: 100%;
		height: 38px;
		padding-right: 34px;
		padding-left: 10px;
		font-size: var(--el-font-size-base);
		background: var(--el-bg-color-page);
		border-top: var(--el-border);
		border-bottom: var(--el-border);
		box-sizing: border-box;
		justify-content: space-between;
		align-items: center;
		transition: 0.4s;
	}

	.api-desc {
		max-width: 160px;
		color: var(--el-text-color-secondary);
		white-space: initial;
		cursor: pointer;
	}

	.api-fold-icon {
		transition: transform 0.3s;
	}

	&.--disable-fold {
		.api-desc {
			cursor: default;
		}
	}

	&.--fold {
		.api-fold-icon {
			transform: rotate(90deg);
		}
	}

	@at-root {
		@include utils-ellipsis-n(2);
	}
}

.data-attr-table {
	width: 100%;
	color: var(--el-text-color-secondary);
	text-align: left;

	.table-head {
		display: block;
		width: 100%;
		height: 40px;
		font-size: 0;
		line-height: 40px;
		border-bottom: var(--el-border);

		.table-head-row {
			display: block;
			width: 100%;
			height: 100%;
		}

		.th-item {
			font-weight: 400;
		}
	}

	.table-body {
		display: block;
		width: 100%;
		padding-bottom: 10px;

		.table-body-row {
			display: block;
			width: 100%;
		}
	}

	.table-head,
	.table-body {
		.column-item {
			display: inline-flex;
			height: 40px;
			padding: 0 6px;
			font-size: 12px;
			line-height: 17px;
			vertical-align: middle;
			box-sizing: border-box;
			align-items: center;

			&:first-child {
				padding-left: 10px;
			}
		}

		.attr-name {
			width: 19%;
		}

		.attr-value {
			width: 41%;
		}

		.attr-status {
			width: 40%;
		}

		.attr-input {
			width: 108px;
			height: 24px;

			.el-input__inner {
				height: 24px;
				line-height: 24px;
				color: var(--el-text-color-secondary);
			}
		}
	}
}

.data-source {
	color: var(--el-text-color-secondary);
	user-select: none;

	.data-result-title {
		padding: 10px;
		border-top: var(--el-border);
		border-bottom: var(--el-border);
	}

	.auto-update-config {
		display: block;
		margin-top: 15px;
		margin-left: 10px;
	}

	.auto-update-checkbox {
		margin-right: 5px;
		line-height: 16px;
		vertical-align: middle;
	}

	.update-interval-input {
		width: 36px;
		margin: 0 5px;
		vertical-align: middle;
	}

	.data-flow-wp {
		position: relative;
		padding: 10px;
	}

	.ds-line {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 7px 0 5px 20px;

		&.mt5 {
			margin-top: 5px;
		}

		.ds-type-text {
			display: inline-block;
			padding: 6px;
			font-size: 12px;
			line-height: 12px;
			color: var(--el-text-color-secondary);
			text-align: center;
			background: var(--el-bg-color-page);
			border-radius: 1px;
		}

		.ds-action-btn {
			width: 120px;
		}

		.refresh-btn {
			font-size: 16px;
			cursor: pointer;
			transition: color 0.2s;

			&:hover {
				color: var(--el-color-primary);
			}
		}
	}

	.ds-dots {
		position: absolute;
		top: 25px;
		left: 15px;
		display: flex;
		width: 1px;
		height: 87px;
		background: var(--el-bg-color-page);
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
	}

	.ds-dot {
		display: inline-block;
		width: 8px;
		height: 8px;
		background: var(--el-bg-color-page);
		border-radius: 4px;
		box-shadow: 0 0 3px #000;
		transition: background 0.2s;

		&.active {
			background: var(--el-color-primary);
		}

		&.error {
			background: var(--el-color-error);
		}
	}

	.data-response {
		padding: 10px;
		padding-top: 0;
	}
}
